css九宫格问题--前端面试

最新推荐文章于 2023-03-15 22:04:37 发布

dandan_18

最新推荐文章于 2023-03-15 22:04:37 发布

阅读量839

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/dandan_18/article/details/80854156

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css实现九宫格浮悬变红

flex布局实现九宫格，浮悬被选中框变红。
下面介绍下写的过程中软实力的体现

<html>
    <head>
        <meta charset="utf-8">
        <title>九宫格</title>
        /*消除各个浏览器之间的差异,初始化标签样式*/
        <link rel="stylesheet" href="./reset.css">
    </head>
    <body>
    /*语义化的写标签*/
        <ul class="wrap">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        <style type="text/css">
        .wrap{
            display: flex;
            flex-wrap: wrap;
            width: 300px;
        }
        .wrap li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            /*盒子width以border+padding+content计算*/
            box-sizing: border-box;
            border:1px solid #000;
            /*解决边距重叠问题*/
            margin-left: -1px;
            margin-top: -1px;
        }
        /*css高级选择器实现边距上移和左移问题*/
        .wrap li:nth-child(3n+1){
            margin-left: 0;
        }
        .wrap li:nth-child(-n+3){
            margin-top: 0;
        }
        .wrap li:hover{
        /*悬浮被掩盖问题*/
            z-index: 10;
            border:1px solid red;
        }
        </style>
    </body>
</html>

dandan_18

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css九宫格问题--前端面试

flex布局实现九宫格，浮悬被选中框变红。下面介绍下写的过程中软实力的体现&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;九宫格&lt;/title&gt; /*消除各个浏览器之间的差异,初始化标签样式*/ &lt;link r..
复制链接

扫一扫